<template>
  <div class="background">
    <el-row>
      <el-col :span="12">
        <el-menu type="card" class="nav">
          <el-menu-item>个人账户</el-menu-item>
          <el-sub-menu index="1">
            <template #title>
              <span>我的账户</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-1" @click="step = 0">个人信息</el-menu-item>
              <el-menu-item index="1-2" @click="step = 1">安全中心</el-menu-item>
              <el-menu-item index="1-3" @click="step = 2">账户注销</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <span>我的订单</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="2-1" @click="step = 3">机票购买订单</el-menu-item>
              <el-menu-item index="2-2" @click="step = 4">提前选座</el-menu-item>
              <el-menu-item index="2-3" @click="step = 5">美食预定</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>
      </el-col>
      <el-col :span="12">
        <div class="main" type="card">
          <el-card class="card" v-if="step === 0">
            <el-card-header>
              <span class="card-title">个人信息</span>
              <el-divider class="line"></el-divider>
            </el-card-header>
            <el-card-body>
              <el-text class="name">姓名:</el-text>
              <el-text class="name">{{form.name}}</el-text>
              <text class="chose-text">称谓</text>
              <el-radio-group class="chose-item" v-model="form.gender">
                <el-radio label="男">先生</el-radio>
                <el-radio label="女">女士</el-radio>
              </el-radio-group>
              <el-form-item label="用户名" class="idCard-item">
                <el-input v-model="form.username" :maxlength="10" :show-word-limit="true" class="idCard"></el-input>
              </el-form-item>
              <el-form-item label="身份证" class="idCard-item">
                <el-input v-model="form.idCard" :maxlength="18" :show-word-limit="true" class="idCard"></el-input>
              </el-form-item>
              <el-form-item label="手机号" class="phoneNum-item">
                <el-input v-model="form.phoneNum" :maxlength="11" :show-word-limit="true" class="phoneNum"></el-input>
              </el-form-item>
              <el-button type="primary" class="submit-btn">保存</el-button>
            </el-card-body>
          </el-card>
          <el-card class="card" v-if="step === 1">
            <el-card-header>
              <span class="card-title">安全中心</span>
              <el-divider class="line"></el-divider>
            </el-card-header>
            <el-card-body>
              <el-text class="text1">账户信息管理：</el-text>
                <el-text class="text2">白鹭俱乐部会根据会员本人提供的真实、详尽的个人信息建立电子账户。账户信息包括中英文姓名、身份证件号码、出生日期、国籍、家庭或单位邮寄地址、家庭或单位邮政编码、电子邮箱地址、联系电话和手机号码等。
                若您的信息发生变更，请您尽快通过在线渠道或致电厦航购票服务热线修改，便于我们能够顺利地为您发送短信或邮件等资讯。</el-text>
                <el-text class="text3">账户密码管理：</el-text>
                <el-text class="text4">白鹭卡电子账户密码分为查询密码和交易密码。任何凭密码进行的操作或经会员合法授权许可下的操作均视为会员本人的操作，由此引起的一切后果由会员本人承担。</el-text>
              <el-text class="text5">查询密码：具有在线查询积分、补登积分、修改会员信息（姓名、身份证件、认证后的手机号码除外）及受让人管理的功能权限。通过在线渠道入会的会员，查询密码即为您入会时设置的密码。通过其他渠道入会的会员，当您的入会资料审核通过后，我们将会发送短信告知您的查询密码。</el-text>
                <el-text class="text6">交易密码：具有账户交易的功能权限，办理身份认证后方可进行交易密码设置。</el-text>
                  <el-text class="text7">1.交易密码设置，请登录在线渠道白鹭俱乐部专区进行在线身份认证后自助设置，或携带本人有效身份证件原件及初始密码函前往厦航直销售票处办理；如由他人代办，还需携带代办人的有效身份证件原件。</el-text>
                    <el-text class="text8">2.交易密码遗忘，请登录在线渠道白鹭俱乐部专区找回或进行在线身份认证后自助设置，或携带本人有效身份证件原件前往厦航直销售票处办理；如由他人代办，还需携带代办人的有效身份证件原件。</el-text>
            </el-card-body>
          </el-card>
          <el-card class="card" v-if="step === 2">
            <el-card-header>
              <span class="card-title">账户注销</span>
              <el-divider class="line"></el-divider>
            </el-card-header>
            <el-card-body>
              <el-text class="text1">您选择永久注销账户后：</el-text>
              <el-text class="text2">1. 会员账户、账户内个人全部信息（包括受让人等）、积分及权益将被清空且无法恢复；</el-text>
              <el-text class="text2-1">2. 尚未到账的积分将无法继续累积和使用；</el-text>
              <el-text class="text2-2">3. 您已完成的交易如需进行售后服务，需要提供进一步的证明文件，如行程单或发票；</el-text>
              <el-text class="text2-3">4. 与账户相关的联名卡将无法继续积分累积；</el-text>
              <el-text class="text2-4">5. 厦航电子钱包等相关账户将无法继续使用；</el-text>
              <el-form-item label="身份验证" class="password_item" prop="password">
                <el-input  placeholder="请输入登录密码"></el-input>
              </el-form-item>
              <el-button type="primary" class="drop-btn">确认注销</el-button>
            </el-card-body>
          </el-card>
          <el-card class="card" v-if="step === 3">
            <el-card-header>
              <span class="card-title">机票购买订单</span>
              <el-divider class="line"></el-divider>
            </el-card-header>
            <el-card-body>
              <div v-for="flight in flights" :key="flight.flightId" >
                <el-main class="main-card" type="card">
                  <el-text class="flightNumber">航班号：{{flight.flightNumber}}</el-text>
                  <el-button class="price1">订单价格：{{ flight.cabinPrices[0].price}}</el-button>
                  <el-text>订单状态：{{flight.orderStatus}}</el-text>
                </el-main>
              </div>
            </el-card-body>
          </el-card>
          <el-card class="card" v-if="step === 4">
            <el-card-header>
              <span class="card-title">提前选座</span>
              <el-divider class="line"></el-divider>
            </el-card-header>
            <el-card-body>
            </el-card-body>
          </el-card>
          <el-card class="card" v-if="step === 5">
            <el-card-header>
              <span class="card-title">美食预定</span>
              <el-divider class="line"></el-divider>
            </el-card-header>
            <el-card-body>
            </el-card-body>
          </el-card>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import axios from "axios";
import {ElMessage} from "element-plus";

export default {
  name: "UserMessage",
  data() {
    return {
      step: "",
      traveller: {},
      travellers: [],
      username: "",
      userInfo: {},
      token: localStorage.getItem("token"),
      form: {
        name: "",
        idCard: "",
        gender: "",
        phoneNum: "",
        username: "",
      }
    }
  },
  created() {
    this.token = localStorage.getItem("token");
    if(localStorage.getItem("token")){
      axios.get("/info", {
        params: { token: this.token },
      })
          .then(response => {
            this.userInfo = response.data;
            if(this.userInfo.userType ==="admin"){
              localStorage.removeItem("token");
              location.reload();
            }
            else{this.username = this.userInfo.username;}
          })
          .catch(error => {
            console.error("Error fetching user info:", error);
          });
    }
    this.fetchTravellers();
  },
  mounted() {
  },
  methods: {
    fetchTravellers() {
      axios.get('/travellers')
          .then(response => {
            this.travellers = response.data;
            this.traveler = this.travellers.find(traveller => traveller.username === this.username);
            this.form.name = this.traveler.name;
            this.form.idCard = this.traveler.idCard;
            this.form.gender = this.traveler.gender;
            this.form.phoneNum = this.traveler.phone;
            this.form.username = this.traveler.username;
          })
          .catch(error => {
            console.error('获取旅客信息失败', error);
            this.$message.error('获取旅客信息失败，请稍后再试');
          });
    },
    fetchCities() {
      axios.get('/cities')
          .then(response => {
            this.cities = response.data;
          })
          .catch(error => {
            console.error('获取城市列表失败', error);
            ElMessage.error('获取城市列表失败');
          });
    },
  }
}
</script>

<style scoped>
.background {
  background-color: #f2f2f2;
  height: 100vh;
  wifth: 100vh;
}
.nav {
  width: 200px;
  background-color: #ffffff;
  position: fixed;
  left: 330px;
  top:  120px;
}
.card {
  background-color: #ffffff;
  padding: 20px;
  margin-top: 100px;
  position: relative;
  top: -40px;
  left: -300px;
  width: 700px;
  height: 600px;
}
.card-title {
  position: relative;
  top: -10px;
  left: -300px;
  font-weight: bold;
}
.line {
  position: relative;
  top: -10px;
  left: -20px;
  width: 700px;
  font-weight: bold;
}
.name{
  position: relative;
  top: -10px;
  left: -180px;
  font-size: 16px;
}
.chose-text{
  position: relative;
  top: 30px;
  left: -213px;
}
.chose-item{
  position: relative;
  top: 30px;
  left: -180px;
}
.idCard-item{
  position: relative;
  top: 50px;
  left: 50px;
}
.phoneNum-item{
  position: relative;
  top: 50px;
  left: 50px;
}
.idCard{
  position: relative;
  left: 20px;
  width: 300px;
}
.phoneNum{
  position: relative;
  left: 20px;
  width: 300px;
}
.submit-btn{
  position: relative;
  top: 55px;
  left: -140px;
  width: 120px;
  height: 40px;
}
.text1{
  position: absolute;
  top: 100px;
  left: 20px;
  font-size: 16px;
}
.text2{
  position: absolute;
  top: 130px;
  left: 20px;
  font-size: 14px;
}
.text3{
  position: absolute;
  top: 200px;
  left: 20px;
  font-size: 16px;
}
.text4{
  position: absolute;
  top: 230px;
  left: 20px;
  font-size: 14px;
}
.text5{
  position: absolute;
  top: 280px;
  left: 20px;
  font-size: 14px;
}
.text6{
  position: absolute;
  top: 350px;
  left: 20px;
  font-size: 14px;
}
.text7{
  position: absolute;
  top: 380px;
  left: 20px;
  font-size: 14px;
}
.text8{
  position: absolute;
  top: 430px;
  left: 20px;
  font-size: 14px;
}
.text2-1 {
  position: absolute;
  top: 160px;
  left: 20px;
  font-size: 14px;
}
.text2-2 {
  position: absolute;
  top: 190px;
  left: 20px;
  font-size: 14px;
}
.text2-3 {
  position: absolute;
  top: 220px;
  left: 20px;
  font-size: 14px;
}
.text2-4 {
  position: absolute;
  top: 250px;
  left: 20px;
  font-size: 14px;
}
.password_item {
  position: absolute;
  top: 300px;
  left: 20px;
  font-size: 14px;
}
.drop-btn {
  position: absolute;
  top: 400px;
  left: 300px;
  width: 120px;
  height: 40px;
}
</style>